<#assign title='Diff ' + env + "."+project+"."+segment />
<#assign activeTitle="config_file" />
<#assign hasNavbar=false />
<#include "/frag.head.ftl">
<link rel="stylesheet" href="${s3('/codemirror/lib/codemirror.css')}">
<link rel="stylesheet" href="${s3('/codemirror/addon/merge/merge.css')}">
<style>
  .CodeMirror {
    height: auto!important;
  }

  .body {
    padding: 0;
  }
</style>

<div id="thecode"></div>

<#include "/frag.foot.ftl">
<script src="${s3('/codemirror/lib/codemirror.js')}"></script>
<script src="${s3('/codemirror/diff_match_patch.js')}"></script>
<script src="${s3('/codemirror/addon/merge/merge.js')}"></script>
<script>
  var dv, highlight = true;
  var content = ${content};

  $(document).ready(function () {
    initUI();
  });

  function initUI() {
    var target = document.getElementById("thecode");
    target.innerHTML = "";
    dv = CodeMirror.MergeView(target, {
      value: '',
      orig: content.orig,
      lineNumbers: true,
      mode: "text/html",
      highlightDifferences: true,
      connect: 'align',
      collapseIdentical: false,
      allowEditingOriginals: false,
      readOnly: true,
      revertButtons: false
    });
    dv.edit.setValue(content.value);
  }
</script>